<script lang="ts" setup>
import { isShowTopUp } from "@/config/ads_ids";
import {
  classNameHomeItemList,
  classNameHomeScrollSnap,
} from "@/config/const_var";
import { articleDetailRoute, homeRoute } from "@/router";
import { getImg, scrollElementTopUp } from "@/utils";
import { useRouter } from "vue-router";
defineOptions({
  name: "HomeTopUp",
});
let router = useRouter();
function handleTopUp() {
  let currentPath = router.currentRoute.value.path;
  if (currentPath === homeRoute.path) {
    let element: any = document.querySelector(`.${classNameHomeScrollSnap}`);
    let firstItem = element.firstElementChild;
    firstItem &&
      firstItem.scrollIntoView({
        behavior: "instant",
      });
  } else if (currentPath === articleDetailRoute.path) {
    scrollElementTopUp("instant");
  } else {
    let element: any = document.querySelector(`.${classNameHomeItemList}`);
    scrollElementTopUp("instant", element);
  }
  isShowTopUp.value = false;
}
</script>
<template>
  <div class="top-up" @click="handleTopUp">
    <img :src="getImg('minirefresh-totop.png')" alt="" />
  </div>
</template>
<style lang="scss" scoped>
.top-up {
  position: fixed;
  right: 16px;
  bottom: 10vh;
  z-index: 999;
  img {
    width: 40px;
    aspect-ratio: 1/1;
  }
}
</style>
